import React, {Component} from 'react';
import {StyleSheet, Text, View,Image,
 TouchableOpacity
} from 'react-native';
export default class Item extends Component{
  _detail(hyCode){
    if(this.props.navigation){
      this.props.navigation.push('monitorDetail',{hyCode})
    }
  }
  render(){
    //console.log('ii',item)
    var item = this.props.item
    var flow_status = item.flow_status
    var image
    var time
    var num
    if(this.props.isHistory){
      time = item.create_time
      num = item.average_flow
    } else {
      time = item.collection_time
      num = item.ecology_out_flow
    }
    // 0-正常 2-异常 1-断流   3-未接入 
    if(flow_status == '0') image = require('../../images/monitor_history_4.png')
    else if(flow_status == '2') image = require('../../images/monitor_history_1.png')
    else if(flow_status == '1') image = require('../../images/monitor_history_2.png')
    else if(flow_status == '3') image = require('../../images/monitor_history_3.png')
    return(
      <TouchableOpacity style={{padding:10,}} onPress={()=>{this._detail(item.hy_code)}}>
        <View style={styles.flowRow}>
          <View style={{flexDirection:'row',marginLeft:5,alignItems:'center'}}>
            <Image source={image}/>
            <Text style={styles.hyName}>{item.hy_name}</Text>
          </View>
          <Text>{time}</Text>
        </View>
        <View style={styles.twoRow}>
          <Text style={{marginLeft:5,}}>{item.com_locations}</Text>
          <View style={{flexDirection:'row',alignItems:'flex-end'}}>
            <Text style={{fontSize:18,color:'#333'}}>{num}</Text><Text>m³/s</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}
const styles = StyleSheet.create({
  hyName:{
    fontSize:15,
    marginLeft:5,
  },
  twoRow:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginRight:5,
  },  
  flowRow:{
    //borderWidth:StyleSheet.hairlineWidth,
    //borderColor:'#ccc',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginRight:5,
    paddingBottom:10,
  },  
})